<template>
	<view>
		<view class="uni-box">
			<uni-forms label-width="120px" label-align="center" ref="formRole" :modelValue="formData.formModel">

				<uni-forms-item label="药品名称:" required :rules="[{ required: true, errorMessage: '请输入药品名称' }]"
					name="name">
					<view class="_itemVals">
						{{formData.formModel.name}}
					</view>
				</uni-forms-item>
				<uni-forms-item label="批号:" required :rules="[{ required: true, errorMessage: '请输入批号' }]"
					name="batchNumber">
					<!-- 			<uni-data-select v-model="formData.formModel.batchNumber" :localdata="batchOption"
						@change="selectChange"></uni-data-select> -->

					<uni-easyinput class="_input" v-model="formData.formModel.batchNumber"
						placeholder="请输入批号"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="供应商:" required :rules="[{ required: true, errorMessage: '请选择供应商' }]"
					name="supplierName">
					<uni-data-select v-model="formData.formModel.supplierId" :localdata="supplierSelector"
						@change="onChange"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="药品规格:" required :rules="[{ required: true, errorMessage: '请输入规格' }]"
					name="specification">
					<view class="_itemVals">
						{{formData.formModel.specification}}
					</view>
				</uni-forms-item>


				<uni-forms-item label="失效日期:" required :rules="[{ required: true, errorMessage: '请输入进货数量' }]"
					name="supplierName">
					<view class="_itemVals">
						{{formData.formModel.endDate}}
					</view>
				</uni-forms-item>



				<uni-forms-item label="账面库存:" required :rules="[{ required: true, errorMessage: '请输入进货数量' }]"
					name="supplierName">
					<view class="_itemVals">
						{{formData.formModel.originalStockQty}}{{formData.formModel.packingUnit}}
						<!-- {{formData.formModel.originalStockQty}} -->
					</view>
				</uni-forms-item>



				<uni-forms-item label="实际库存:" required :rules="[{ required: true, errorMessage: '请输入实际库存' }]"
					name="supplierName">
					<view class="_itemVals" style="width: 90%;">
						<uni-easyinput class="_input" :disabled="!formData.formModel.batchNumber"
							v-model="formData.formModel.stockQty" placeholder="请输入实际库存"
							@input="changeInput"></uni-easyinput>
						{{formData.formModel.packingUnit}}
					</view>
				</uni-forms-item>


				<uni-forms-item label="盈亏数量:" required :rules="[{ required: true, errorMessage: '请输入进货数量' }]"
					name="supplierName">
					<view class="_itemVals">
						{{formData.formModel.changeStockQty}}
						{{formData.formModel.packingUnit}}
					</view>
				</uni-forms-item>


				<uni-forms-item label="成本盈亏:" required :rules="[{ required: true, errorMessage: '请输入进货数量' }]"
					name="supplierName">
					<view class="_itemVals">
						{{formData.formModel.purchasePrice * formData.formModel.changeStockQty || 0}}
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>

		<view class="footer">
			<button @click="clone">
				取消
			</button>
			<button type="primary" @click="onPharmacyAdd">
				入库
			</button>
		</view>


	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getDetails,
		geAdds
	} from "./request.js"
	import {
		reactive,
		ref
	} from "vue";


	import getOptions from "@/utils/options/getSelectList.js"
	let supplierSelector = ref([])
	getOptions('supplierSelector', supplierSelector).then((res) => {
		supplierSelector.value = res
	})



	const formRole = ref(null)
	const formData = reactive({
		formModel: {
			// name: "",
			// batchNumber: "",
			// supplierId: "",
			// supplierName: "",
			// specification: "",
			// endDate: "",
			// originalStockQty: "",
			// stockQty: "",
			// changeStockQty: "",
			// costAmount: "",
		},
		header: {
			state: 2,
		},
		arr: [],
	})

	const changeInput = (e) => {
		formData.formModel.stockQty = Number(e)
		formData.formModel.changeStockQty = formData.formModel.stockQty - formData.formModel.originalStockQty || 0
	}

	const batchOption = ref([])

	const clone = () => {
		uni.redirectTo({
			url: '/pages/view/InventoryCount/index'
		})
	}

	const onPharmacyAdd = async () => {
		formRole.value.validate().then(async ({
			valid,
			errors
		}) => {
			if (valid) {
				console.log('失败');
			} else {
				// let params = {
				// 	formData.formModel,
				// 	formData.header
				// }
				geAdds({
					bodys: [formData.formModel],
					header: formData.header
				}).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '盘点成功',
							icon: 'success',
							 duration: 3000,
							success() {
								uni.redirectTo({
									url: '/pages/view/InventoryCount/index'
								})
							}
						});


					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						});
					}
				})
			}
		});
	};

	const onChange = (e) => {
		formData.formModel.supplierId = e
	}

	// const selectChange = (e) => {
	// 	const object = formData.arr.find(obj => obj.batchNumber === e)
	// 	formData.formModel.endDate = object.endDate
	// 	formData.formModel.supplierName = object.supplierName

	// 	formData.formModel.originalStockQty = object.originalStockQty
	// 	formData.formModel.changeStockQty = object.changeStockQty
	// 	formData.formModel.costAmount = object.costAmount
	// 	onChange(object.supplierId)
	// }

	onLoad((e) => {
		formData.formModel = JSON.parse(decodeURIComponent(e.obj))
		// batchOption.value = formData.formModel.map(it => {
		// 	return {
		// 		value: it.batchNumber,
		// 		text: it.batchNumber
		// 	}
		// })
		// let detailId = e.id
		// getDetails({
		// 	id: detailId
		// }).then((res) => {
		// 	formData.formModel.name = res.data.bodys[0].name
		// 	formData.arr = res.data.bodys

		// })
	})
</script>

<style lang="scss">
	._input {
		border: none;
	}

	._itemVals {
		display: flex;
		align-items: center;
		height: 100%;
		color: #c8c9d6;
	}

	.uni-box {
		padding: 18rpx 0;
	}

	.uni-forms-item {
		border-bottom: 1rpx solid #ccc;
		margin-bottom: 12rpx !important;
		padding-bottom: 12rpx;
	}

	.footer {
		position: fixed;
		bottom: 10rpx;
		left: 0;
		right: 0;
		padding: 6rpx;
		display: flex;
		justify-content: space-between;

		button {
			margin: 0 6px;
			width: 50%;
		}
	}
</style>